📝 Description

This PR tightens responsive behavior and breakpoint handling across the kit:

• Theme: Introduces AppBreakpointValues and a single breakpointValues object (required keys) as the source of truth for pixel widths, passed into MUI breakpoints and used in mixins/dialog overrides without ?? fallbacks. Documents how Dialog maxWidth presets map to those tokens (preset names ≠ layout breakpoint names).
• Layout template: Replaces window.innerWidth, useState, and window resize with useTheme() + useMediaQuery(theme.breakpoints.down("sm"), { noSsr: true }) so sidenav collapse matches the theme and avoids SSR window access.
• Charts / overflow UI: Replaces window resize with ResizeObserver on the relevant DOM nodes in BarGraph (Y-axis width vs container) and OverflowTooltip (text overflow vs wrapper). Fixes Rules of Hooks in OverflowTooltip by declaring state before effects.
• Storybook: Updates Modal stories and argTypes to describe content widths (M/L/XL) vs layout breakpoints and points readers to the theme docblock.

Commits (newest last):

1. refactor(theme): typed breakpointValues and dialog maxWidth mapping docs
2. fix(layout): use useMediaQuery for sidenav collapse instead of window resize
3. refactor: use ResizeObserver instead of window resize in bar-graph and overflow-tooltip
4. docs(storybook): clarify modal content widths vs layout breakpoints

🔗 Related Issue

🧪 Type of Change

• 🐛 Bug fix (non-breaking change which fixes an issue) — Layout SSR-safe collapse; OverflowTooltip hook order
• ✨ New feature (non-breaking change which adds functionality)
• 💥 Breaking change: Existing checks for sm and xs breakpoints were ignored up until now. Now they are activated by introducing these breakpoints.
• 📚 Documentation update — Storybook + JSDoc on dialog.tsx
• 🎨 Style/design update
• 🔧 Build/CI update
• ♻️ Refactoring — ResizeObserver; typed breakpointValues
• 🧪 Tests only

🧪 Testing

• Unit tests pass (yarn test) — confirm in CI / locally; @open-ui-kit/core may report no unit tests
• Storybook builds successfully (yarn storybook)
• Manual testing completed — recommended: resize window, open Modal sizes story, overflow + bar chart layouts
• Cross-browser testing (if applicable)

Test Instructions:

1. Run yarn turbo run lint --filter=@open-ui-kit/core (or repo lint) and ensure it passes.
2. Layout: Open a story or playground using Layout; resize below/above 600px (sm); sidenav should collapse/expand; reload on narrow viewport and check for a possible brief flash (noSsr).
3. Modal: In Storybook Components → Modal → Dialog sizes (content width), open each dialog and confirm paper widths match the documented mapping (e.g. maxWidth="md" → 600px paper from breakpointValues.sm).
4. OverflowTooltip: Long text in a narrow container; tooltip only when truncated; resize container/window and confirm behavior updates.
5. BarGraph: Resize parent/container; Y-axis header width should track (~43% of container) without relying on window resize only.

♿ Accessibility

• Follows WCAG 2.1 AA guidelines — no intentional regression; verify Modal focus/labels unchanged
• Keyboard navigation tested
• Screen reader tested
• Color contrast verified
• Focus indicators present
• ARIA attributes added where needed

📱 Responsive Design

• Mobile responsive — Layout down(sm); Modal story documents content widths
• Tablet responsive — breakpoint scale unchanged (e.g. sm 600, md 1024)
• Desktop responsive
• All breakpoints tested — spot-check sm / md boundaries

📚 Documentation

• Storybook story added/updated — Modal sizes story + maxWidth description
• Component props documented
• Usage examples provided — via Storybook story copy
• README updated (if needed)
• TypeScript types exported — AppBreakpointValues, breakpointValues from theme/common.tsx (consumers importing @/theme/common)

🔄 Breaking Changes

• This PR introduces breaking changes — no public API removals; Modal/Dialog signatures unchanged
• Migration guide provided (if breaking changes)
• Version bump required

Behavioral notes (non-breaking but worth release notes):

• Layout: First client paint may briefly differ from SSR for sidenav collapse (useMediaQuery + noSsr: true).
• BarGraph / OverflowTooltip: Size updates follow element resize (ResizeObserver), not only viewport resize.
• Dialog: Preset → pixel mapping is documented; names still differ from layout breakpoint labels by design.

📋 Checklist

• Code follows the project's style guidelines
• Self-review of code completed
• Code is commented where necessary — dialog.tsx JSDoc table
• No console.log statements left in code
• Build passes locally
• Tests added for new functionality
• Existing tests still pass
• No TypeScript errors — full-package tsc may have pre-existing issues outside this PR
• No accessibility violations
• PR title follows conventional commit format — e.g. feat/fix/refactor scope as appropriate

📸 Screenshots

For Maintainers:

• Ready for review
• Requires design review
• Requires accessibility review
• Ready to merge